<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <div>
      <div class="wrap">
        <div class="list-group-wrap" :class="{ roll_animation: rollState == 'start' }" :style="{
                  transform: `translateX(${translateX}px)`,
                  'transition-duration': duration + 'ms',
                }">
          <div v-for="(item, index) in shaftList" :key="index" :style="{
                    background: item.color,
                  }" class="list-group-item" :class="{ item_actived: activedCurrentIndx === index }"></div>
          <div></div>
          <!-- <div class="list-group-wrap"></div> -->
        </div>
      </div>
      <div style="margin-left: 65px; margin-top: 15px">
        <button @click="roll({ results: 'red' })"> 红色抽奖</button>
        <button @click="roll({ results: 'green' })"> 绿色抽奖</button>
        <button @click="roll({ results: 'blue' })"> 蓝色抽奖</button>
        <button @click="roll({ results: 'yellow' })"> 黄色抽奖</button>
        <button @click="roll({ results: 'orange' })"> 橙色抽奖</button>
        <button @click="roll({ results: 'gray' })">灰色抽奖</button>
      </div>
    </div>
  </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data() {
      return {
        prizeList: [
          { color: "red" },
          { color: "green" },
          { color: "blue" },
          { color: "yellow" },
          { color: "orange" },
          { color: "gray" },
        ],
        // 位置
        translateX: 0,
        // 摇奖状态
        rollState: "stop",
        // 总的摇奖时间 单位毫秒
        duration: 4000,
        // 滚动列表
        shaftList: [],
        // 高亮中奖的奖品的索引
        activedCurrentIndx: -1,
        // 当前滚动的索引
        currentIndex: -1,
      };
    },
    mounted() {
      this.init({});
    },
    methods: {
      // 初始化
      init({
        // 默认显示奖品
        defaultResults = "blue",
        // 滚动时间 从开始滚动到所有滚动结束 默认4000ms
        duration = 3500,
      }) {
        // 最低4秒
        if (duration < 4000) {
          duration = 4000;
        }
        let shaftList = [];
        this.shaftList = this.shuffle(this.prizeList);
        console.log(shaftList, "shaftList123");
        this.$nextTick(function () {
          this.duration = duration;
        });
      },
      shuffle(arr) {
        let tmpArr = JSON.parse(JSON.stringify(arr));
        // 如果抽奖总时长比较长时候，请适当调大倍数，最低不能小于4，另外奖品数量不能太少
        let len = Math.ceil(36 / arr.length); //倍数
        let tmpShaft = [];
        while (len > 0) {
          tmpShaft.push(...tmpArr);
          len--;
        }
        return JSON.parse(JSON.stringify(tmpShaft));
      },
      // 设定位置
      setTranslateX(results) {
        let res = [];
        const groupPrizeLength = this.prizeList.length
        // 倒序遍历奖品列表，找出开奖结果的最靠后的下标
        for (let k = this.shaftList.length - 1 - groupPrizeLength; k >= 0; k--) {
          if (this.shaftList[k].color == results) {
            console.log("asdas");
            res.push(JSON.parse(JSON.stringify(this.shaftList[k])));
            // 延迟滚动
            console.log(k, "k123");
            console.log(k * -66, "k * -10012");
            this.currentIndex = k;
            this.translateX = (k - 1) * -66.6;
            console.log(this.translateX, "this.translateX123");
            break;
          }
        }
        return res;
      },
      // 摇奖
      roll({
        // 开奖结果
        results = null,
        // 开奖回调
        success = null,
      }) {
        if (this.rollState == "start") {
          return console.warn("正在抽奖哦！");
        }
        this.activedCurrentIndx = -1;
        this.currentIndex = -1;
        console.log("jinlaile1");
        // this.duration = 4000;
        this.rollState = "start";
        // 滚动位置
        let res = this.setTranslateX(results);
        setTimeout(() => {
          typeof success == "function" && success(res);
          this.stop();
        }, this.duration + 1000);
      },
      stop() {
        this.rollState = "stop";
        this.$nextTick(function () {
          console.log(this.shaftList, "this.shaftList123");
          console.log(this.prizeList.length, "this.shaftList123");
          console.log(
            (this.shaftList.length / this.prizeList.length - 1) *
            this.prizeList.length,
            "asdas"
          );
          // 停止滚动之后，位移到第二组奖品列表的对应位置，为下一次摇奖留下滚动空间，实现多次摇奖无缝滚动效果
          const diffValue =
            (this.shaftList.length / this.prizeList.length - 3) *
            this.prizeList.length;

          let tolerance = diffValue * 66.4; //公差
          let topY = this.translateX + tolerance;
          this.translateX = topY;
          this.activedCurrentIndx = this.currentIndex - diffValue;
        });
      },
    },
  })
</script>

<style lang="scss" scoped>
  .wrap {
    margin-top: 15px;
    margin-left: 30px;
    width: 209px;
    height: 100px;
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: auto;
  }

  .list-group-wrap {
    display: flex;
    align-items: center;
    /* position: absolute; */
    width: 2400px;
    transition-property: none;
    transition-duration: 0s;
    padding: 10px;
  }


  .list-group-item {
    width: 50%;
    height: 50px;
  }

  .list-group-item+.list-group-item {
    margin-left: 10px;
  }

  .item_actived {
    border: 3px dashed #c5821c;
  }

  .roll_animation {
    transition-property: transform;
    transition-timing-function: cubic-bezier(1, 0, 0.1, 1);
  }
</style>

</html>